<template>
  <div>
    <Content>
      <div class="Mine">
        <div class="mine-top-container">

          <div class="mine-top-left">
            <van-field name="uploader" class="Img">
              <template #input>
                <van-uploader class="left_img" />
              </template>
            </van-field>
          </div>

          <div class="mine-top-right">
            <p class="p1" @click="toLogin">立即登录</p>
          </div>
        </div>

        <!-- 通知栏 -->
        <div class="mine-bar-container">
          <van-notice-bar
            left-icon="volume-o"
            color="red"
            background="#fff"
            scrollable
            text="新上线更稳定的付费快递查询接口"
          />
        </div>

        <!-- 单元格 -->
        <van-cell title="我的订单" class="mine-cell">
          <template #icon>
            <div class="iconfont icon-dingdanguanli"></div>
          </template>
        </van-cell>

        <!-- 宫格 -->
    <van-grid :border="false" class="order">
      <van-grid-item icon="cash-back-record" text="待付款"></van-grid-item>
      <van-grid-item icon="failure" text="待发货"></van-grid-item>
      <van-grid-item icon="completed" text="待收货"></van-grid-item>
      <van-grid-item  icon="other-pay" text="待评价"></van-grid-item>
    </van-grid>

     <!-- 宫格 -->
    <div class="my">
      <van-grid :border="false" :column-num="3">
        <van-grid-item icon="gold-coin-o" text="我的余额"></van-grid-item>
        <van-grid-item icon="qr-invalid" text="我的砍价"></van-grid-item>
        <van-grid-item icon="coupon-o" text="我的礼券"></van-grid-item>
      </van-grid>

      <van-grid :border="false" :column-num="3">
        <van-grid-item icon="records" text="我的收藏"></van-grid-item>
        <van-grid-item icon="manager-o" text="我的地址" @click="toAddress"></van-grid-item>
        <van-grid-item icon="phone-circle-o" text="联系客服"></van-grid-item>
      </van-grid>
    </div>
    <p class="p">The work of liu tao</p>
     
      </div>
    </Content>
  </div>
</template>
<script>
import Content from "../components/content/Content";

export default {
  components: { Content },
  methods: {
    toLogin() {
      this.$router.push("/login");
    },
    toAddress(){
      this.$router.push("/address");
    }
  },
};
</script>
<style  scoped>
.Mine {
  width: 100vw;
  height: 90vh;
  background-color:white;
}
.mine-top-container {
  width: 100%;
  height: 6rem;
  background-color: #c1b18f;
  display: inline-flex;
  box-sizing: border-box;
}

.mine-top-left {
  width: 30%;
  height: 100%;
  /* background-color: cadetblue; */
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.Img {
  width: 4rem;
  height: 4rem;
  border-radius: 4rem;
  /* display: inline-flex; */
  /* justify-content: center; */
  /* align-items: center; */
}
.left_img {
  width:4rem;
  height:4rem;
  z-index:999;
  border-radius:4rem;
}

.mine-top-right {
  width: 70%;
  height: 100%;
  display: inline-flex;
  flex-direction: column;
  text-align: left;
  color: #fff;
  box-sizing: border-box;
  padding: 0.5rem;
}
.mine-top-right .p1 {
  font-size: 0.9rem;
  margin-top: 25px;
  margin-left: 0px;
}
.mine-bar-container {
  width: 100%;
}
.mine-cell{
  text-align: left;
  font-size:0.7rem;
  margin-top:0.5rem;
}
.order{
  border-top:0.5rem solid lightgray;
}
.my {
  border-top:0.5rem solid lightgray;
}
.p{
    width:100%;
    height:0.7rem;
    background-color: lightgray;
    color: gray;
    text-align: center;
    line-height:0.7rem;
  margin-top: 0.35rem;
  font-size:0.5rem;
}
</style>